<template>
  <div>
    <van-nav-bar title="账号登录" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        placeholder="请输入账号"
        :rules="[
    { required: true, message: '请填写用户名' },
    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符'}
    ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[
    { required: true, message: '请填写密码' },
    { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符'}
    ]"
      />
      <div style="margin: 16px;">
        <van-button  block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <a href="#" @click.prevent="fn()">还没账号,去注册~</a>
  </div>
</template>

<script>
import requset from '../utils/requset'
export default {
  name: 'VueHaowuLogin',

  data () {
    return {
      username: 'hzhmqd',
      password: '123456'
    }
  },

  mounted () {},

  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async onSubmit (value) {
      const res = await requset({
        url: '/user/login',
        method: 'post',
        data: {
          username: value.username,
          password: value.password
        }
      })
      console.log(res)
      this.$router.push('/home/profile')
      localStorage.setItem('user', res.body.token)
      this.$toast.success(res.description)
      localStorage.setItem('dan', '上海')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: @blue !important;
   .van-icon {
    color:  #dbf4ea
  }
 .van-nav-bar__title  {
  color: #f1fbf8;
  }
}
/deep/ .van-cell {
 margin-top: 20px;
}
a {
  margin-left: 120px;
  margin-top: 20px;
  color: #666;
}
</style>
